import avatarImg from '@/assets/img/avatar.png';
import bgImg from '@/assets/img/bg.jpg';

import icon4 from '@/assets/img/bilibili.png';
import icon1 from '@/assets/img/github.png';
import icon2 from '@/assets/img/qq.png';
import icon3 from '@/assets/img/wechat.png';

import TopFooter from '@/components/TopFooter';
import 'animate.css';
import { message } from 'antd';
import { useEffect, useState } from 'react';
import Focus from './cpm/Focus';
import Recent from './cpm/Recent';
import './index.less';

export default function HomePage() {
  const [iconList, setIconList] = useState([
    {
      icon: icon1,
      desc: 'https://gitee.com/you_haosheng',
    },
    {
      icon: icon2,
      desc: '2987676721',
    },
    {
      icon: icon3,
      desc: 'respica',
    },
    {
      icon: icon4,
      desc: 'https://space.bilibili.com/62797084?spm_id_from=333.1007.0.0',
    },
  ]);

  function onIcon(item: any) {
    // 检查是否支持现代 clipboard API
    if (navigator.clipboard && window.isSecureContext) {
      navigator.clipboard
        .writeText(item.desc)
        .then(() => {
          message.success('复制成功');
        })
        .catch(() => {
          message.error('复制失败');
          // 可以考虑降级到传统方法
          fallbackCopyTextToClipboard(item.desc);
        });
    } else {
      // 使用传统方法
      fallbackCopyTextToClipboard(item.desc);
    }
  }

  // 传统复制方法
  function fallbackCopyTextToClipboard(text: string) {
    const textArea = document.createElement('textarea');
    textArea.value = text;

    // 避免滚动到底部
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.position = 'fixed';
    textArea.style.opacity = '0';

    document.body.appendChild(textArea);
    textArea.focus();
    textArea.select();

    try {
      const successful = document.execCommand('copy');
      if (successful) {
        message.success('复制成功');
      } else {
        message.error('复制失败');
      }
    } catch (err) {
      message.error('复制失败');
    }

    document.body.removeChild(textArea);
  }



  return (
    <>
      <div className="home-page">
        <img src={bgImg} alt="" className="fix-bg" />
        <div className="insert-avatar">
          <div className="ia-avatar">
            <img src={avatarImg} alt="" />
          </div>
          <div className="ia-desc">头顶着一个太阳的平凡人</div>
          <div className="ia-icons">
            {iconList.map((item, index) => (
              <i key={index} onClick={() => onIcon(item)}>
                <img src={item.icon} alt="" />
                <div className="iai-desc">{item.desc}</div>
              </i>
            ))}
          </div>
        </div>
        <div className="content">
          <div className="c-pencel wrapper-v2">
            <i className="iconfont icon-liuyan"></i>
            <div className="cp-content">
              <span style={{ margin: '0 10px 0 3px' }}>:</span>
              <span>网站还在建设中 . . .</span>
            </div>
          </div>
          <Focus></Focus>
          <Recent title="近况"></Recent>
          <TopFooter></TopFooter>
        </div>
      </div>

      {/* <ShartNight /> */}
    </>
  );
}
